import { Cascader, Form, Input, Modal, Select, Password } from 'antd';
import React, { Component } from 'react';
import _ from 'lodash';
import { connect } from 'umi';
import cityOption from '@/pages/userManage/city';

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 15 },
  },
};

class UserModal extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    this.formRef = React.createRef();
  }
  componentDidUpdate() {
    const { userDetail = {} } = this.props;
    !userDetail.id && this.formRef.current && this.formRef.current.resetFields();

    this.formRef.current &&
      this.formRef.current.setFieldsValue({ ...this.props.userDetail, password: '' } || {});
  }

  render() {
    const { visible, userDetail, handleCancel, handleSumbit, troops } = this.props;

    const formColumns = [
      {
        title: '账号',
        name: 'username',
        rules: [
          {
            required: true,
          },
        ],
      },
      {
        title: '密码',
        name: 'password',
        type: 'password',
        rules: [
          {
            required: true,
          },
        ],
      },
      {
        title: '邮箱',
        name: 'email',
        type: 'input',
        rules: [
          {
            required: true,
          },
        ],
      },
      {
        title: '姓名',
        name: 'trueName',
        rules: [
          {
            required: true,
          },
        ],
      },
      {
        title: '性别',
        name: 'sex',
        type: 'select',
        rules: [
          {
            required: true,
          },
        ],
        Option: [
          { value: '0', name: '男' },
          { value: '1', name: '女' },
        ],
      },
      {
        title: '所在地址',
        name: 'address',
        type: 'cascader',
        Option: cityOption,
        rules: [
          {
            required: true,
          },
        ],
      },
      // {
      //   title: '负责人',
      //   name: 'rank',
      //   rules: [
      //     {
      //       required: true,
      //     },
      //   ],
      // },

      {
        title: '电话',
        name: 'telephone',
        rules: [
          {
            required: true,
          },
        ],
      },
      {
        title: '权限',
        name: 'roleName',
        type: 'select',

        Option: [
          //{ value: '超级管理员', name: '超级管理员' },
          { value: '管理员', name: '管理员' },
          { value: '高级用户', name: '高级用户' },
          { value: '普通用户', name: '普通用户' },
        ],
        rules: [
          {
            required: true,
          },
        ],
      },
    ];
    return (
      <Modal
        title={_.get(userDetail, 'id', null) ? '修改用户' : '新增用户'}
        open={visible}
        onCancel={() => {
          handleCancel();
          this.formRef && this.formRef.current && this.formRef.current.resetFields();
        }}
        onOk={() => {
          this.formRef.current &&
            this.formRef.current
              .validateFields()
              .then((values) => {
                handleSumbit(_.get(userDetail, 'id', null) ? 'update' : 'add');
              })
              .catch((errorInfo) => {
                // alert("验证未通过")
              });
        }}
        width="500px"
      >
        <Form {...formItemLayout} ref={this.formRef}>
          {formColumns.map((item, index) => {
            switch (item.type) {
              case 'cascader': {
                return (
                  <Form.Item
                    label={item.title}
                    key={index}
                    name={item.name}
                    rules={item.rules.map((rule) => {
                      return {
                        ...rule,
                        message: `${item.title}不能为空`,
                      };
                    })}
                  >
                    <Cascader options={item.Option}></Cascader>
                  </Form.Item>
                );
              }
              case 'select': {
                return (
                  <Form.Item
                    label={item.title}
                    key={index}
                    name={item.name}
                    rules={item.rules.map((rule) => {
                      return {
                        ...rule,
                        message: `${item.title}不能为空`,
                      };
                    })}
                  >
                    <Select>
                      {item.Option.map((role, index) => {
                        return (
                          <Select.Option key={index} value={role.value}>
                            {role.name}
                          </Select.Option>
                        );
                      })}
                    </Select>
                  </Form.Item>
                );
              }
              case 'treeSelect': {
                return (
                  <Form.Item
                    label={item.title}
                    key={index}
                    name={item.name}
                    rules={item.rules.map((rule) => {
                      return {
                        ...rule,
                        message: `${item.title}不能为空`,
                      };
                    })}
                  >
                    {item.Option.length && (
                      <Select allowClear>
                        {item.Option.map((leaf, index) => {
                          return (
                            <Select.OptGroup label={leaf.title} key={item.name + index}>
                              {leaf.children.map((l, num) => {
                                let value =
                                  l.value !== undefined
                                    ? l.value
                                    : l.key !== undefined
                                    ? String(l.key)
                                    : l.title;
                                return (
                                  <Select.Option
                                    value={value}
                                    title={l.title}
                                    key={`${l.title}.${num}`}
                                  >
                                    {l.title}
                                  </Select.Option>
                                );
                              })}
                            </Select.OptGroup>
                          );
                        })}
                      </Select>
                    )}
                  </Form.Item>
                );
              }
              case 'password': {
                return _.get(userDetail, 'id', null) ? (
                  <Form.Item label={item.title} key={index} name={item.name}>
                    <Input placeholder={`若不输入${item.title}不修改`} allowClear />
                  </Form.Item>
                ) : (
                  <Form.Item
                    label={item.title}
                    key={index}
                    name={item.name}
                    rules={item.rules.map((rule) => {
                      return {
                        ...rule,
                        message: `${item.title}不能为空`,
                      };
                    })}
                  >
                    <Input placeholder={`请输入${item.title}`} allowClear />
                  </Form.Item>
                );
              }
              default: {
                return (
                  <Form.Item
                    label={item.title}
                    key={index}
                    name={item.name}
                    rules={item.rules.map((rule) => {
                      return {
                        ...rule,
                        message: `${item.title}不能为空`,
                      };
                    })}
                  >
                    <Input placeholder={`请输入${item.title}`} allowClear />
                  </Form.Item>
                );
              }
            }
          })}
        </Form>
      </Modal>
    );
  }
}

export default connect(
  ({ global }) => ({
    troops: global.troops,
  }),
  (dispatch) => {
    return { dispatch };
  },
  null,
  { forwardRef: true },
)(UserModal);
